<template>
  <ContentWrap>
    <div v-loading="formLoading" :style="`height:${tableHeight}px`">
    <div class="routeHeader">
      <el-button
       @click="goBack"
       >
       关 闭
      </el-button>
    </div>
  <el-form
      ref="formRef"
      :model="formData"
      label-width="110px"
      v-loading="formLoading"
    >
      <el-form-item label="工序名称" prop="dictProcessName">
        <el-select
          v-model="formData.dictProcessName"
          placeholder=""
          clearable
          class="!w-220px"
          disabled
        >
          <el-option
            v-for="dict in getIntDictOptions('craft_process_name')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="单价" prop="unitPrice">
        <el-input v-model="formData.unitPrice" class="!w-220px" disabled  placeholder=""/>
      </el-form-item>
      <el-form-item label="单位" prop="dictValuationUnit">
        <el-select
          v-model="formData.dictValuationUnit"
          placeholder=""
          clearable
          class="!w-220px"
          disabled
        >
          <el-option
            v-for="dict in getIntDictOptions('config_wage_valuation_unit')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="图号/编号" prop="drawingNumber">
        <el-input v-model="formData.drawingNumber" class="!w-220px" disabled  placeholder=""/>
      </el-form-item>
      <el-form-item label="机加工序" prop="dictMachiningProcess">
        <el-select
          v-model="formData.dictMachiningProcess"
          clearable
          class="!w-220px"
          placeholder="无"
          disabled
        >
          <el-option
            v-for="dict in getIntDictOptions('machining_process')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="dictProcessValuationStatus">
        <el-select v-model="formData.dictProcessValuationStatus" class="!w-220px" disabled  placeholder=" ">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CONFIG_WAGE_PROCESS_VALUATION_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          >
            {{ dict.label }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目单价" prop="" class="box">
        <el-table
          ref="multipleTableRef" 
          :data="list"
           border 
           :height="tableHeight-400"
          >
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column label="零件名称" align="left" header-align="left" prop="partsName" />
          <el-table-column label="规格" align="left" header-align="left" prop="specification" />
          <el-table-column label="加工工序" align="left" header-align="left" prop="processing" />
          <el-table-column label="单位" align="left" header-align="left" prop="unit" />
          <el-table-column label="单价（元）" align="right" header-align="right" prop="unitPrice" />
          <el-table-column label="数量" align="left" header-align="left" prop="quantity" />
          <el-table-column label="备注" align="left" header-align="left" prop="remark" />
        </el-table>
      </el-form-item>
    </el-form>
  </div>
  </ContentWrap>

</template>
<script setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as WageProcessValuationVersionApi from '@/api/config/wageProcessValuationVersion'
import { useTagsViewStore } from '@/store/modules/tagsView'
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const { query } = useRoute() // 路由的查询
const list = ref()//table数据
const formData = ref({
  id: undefined,
  dictProcessName: undefined,
  unitPrice: undefined,
  drawingNumber: undefined,
  dictValuationUnit: undefined,
  dictMachiningProcess: undefined,
  dictProcessValuationStatus: undefined,
})

const formRef = ref() // 表单 Ref
// const formRules = reactive({
//   dictProcessName: [{ required: true, message: ' ', trigger: 'change' }],
//   drawingNumber: [{ required: true, message: '', trigger: 'blur'}],
//   dictMachiningProcess: [{ required: true, message: '', trigger: 'change' }],
//   dictProcessValuationStatus: [{ required: true, message: '', trigger: 'change' }]
// })

// 返回
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async() => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  console.log('route.currentRoute',route.currentRoute )
  //跳转列表页
  route.push({
    path:'/config/config/salaryAssessment/wageProcessValuationVersion'
  })
}

const getData = async () => { 
  // let temp =ref()
  formLoading.value =true
  formData.value = await WageProcessValuationVersionApi.getWageProcessValuationVersion(query.id)
  // temp.value = await WageProcessValuationVersionApi.getWageProcessValuationVersionList(query.id)
  list.value = formData.value.machiningList
  formLoading.value =false
} 

// 初始化
const tableHeight = ref(0)
onMounted(async()=>{
  // const queryParamsHeight = queryFormRef.value.$el.clientHeight + 2
  tableHeight.value = document.body.clientHeight -150
  formData.value = await WageProcessValuationVersionApi.getWageProcessValuationVersion(query.id) 
 await getData()
})
</script>
<style scoped>
 .box{
  display: flex;
  flex-direction: column
 }
::v-deep .box .el-form-item__content{
    margin-top:10px;
  }
</style>  